<script lang="ts">
export default {
  name: "admin_product"
}
</script>
<template>
  <div>
    <t-table row-key="id" :data="data.ProductAllList" :columns="ProductTableColumns"
             bordered hover stripe paginationAffixedBottom size="small"
             :loading="data.Loading" tableLayout="auto" :pagination="{
               pageSize:data.ProductAllListPagination.pageSize,
               current:data.ProductAllListPagination.current,
               total:data.ProductAllListPagination.total,
               pageSizeOptions:[10,20,30,50,100,200,300,500,1000]
               }" @page-change="onPageChange">
      <template #cmd="db">
        <ProductSetting :db="db.row" @success="GetAllProductList"/>
      </template>
      <template #key="db">
        <t-tag size="small" theme="primary" variant="light">
          {{ db.row.key }}
        </t-tag>
      </template>
      <template #name="db">
        <t-tag size="small" theme="primary" variant="light">
          {{ db.row.name }}
        </t-tag>
      </template>
      <template #vip_1="db">
        <t-tag size="small" theme="danger" variant="outline">
          <template #icon>
            <MoneyCircleIcon/>
          </template>
          {{ db.row.vip_1.toFixed(2) }}
        </t-tag>
      </template>
      <template #vip_2="db">
        <t-tag size="small" theme="danger" variant="outline">
          <template #icon>
            <MoneyCircleIcon/>
          </template>
          {{ db.row.vip_2.toFixed(2) }}
        </t-tag>
      </template>
      <template #vip_3="db">
        <t-tag size="small" theme="danger" variant="outline">
          <template #icon>
            <MoneyCircleIcon/>
          </template>
          {{ db.row.vip_3.toFixed(2) }}
        </t-tag>
      </template>
      <template #vip_4="db">
        <t-tag size="small" theme="danger" variant="outline">
          <template #icon>
            <MoneyCircleIcon/>
          </template>
          {{ db.row.vip_4.toFixed(2) }}
        </t-tag>
      </template>
      <template #vip_5="db">
        <t-tag size="small" theme="danger" variant="outline">
          <template #icon>
            <MoneyCircleIcon/>
          </template>
          {{ db.row.vip_5.toFixed(2) }}
        </t-tag>
      </template>
      <template #vip_6="db">
        <t-tag size="small" theme="danger" variant="outline">
          <template #icon>
            <MoneyCircleIcon/>
          </template>
          {{ db.row.vip_6.toFixed(2) }}
        </t-tag>
      </template>
      <template #intro="db">
        <div class="intro r-fx-row">{{ db.row.intro }}</div>
      </template>
      <template #topContent>
        <t-space style="margin-bottom: 0.6em">
          <t-button @click="GetAllProductList" theme="primary" size="small">
            <template #icon>
              <RefreshIcon/>
            </template>
            刷新列表
          </t-button>
        </t-space>
      </template>
    </t-table>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive} from "vue";
import {PageInfo} from "tdesign-vue-next";
import api from "../../../api/api";
import {
  RefreshIcon, MoneyCircleIcon
} from "tdesign-icons-vue-next";
import {PrimaryTableCol} from "tdesign-vue-next";
import {Product} from "../../../tool/types";
import ProductSetting from "./product/setting.vue"

const data = reactive({
  Loading: false,
  ProductAllList: new Array<Product>(),
  ProductAllListPagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  }
})

const ProductTableColumns: Array<PrimaryTableCol> = [
  {
    colKey: 'key',
    align: 'center',
    width: '120',
    title: 'Key',
  },
  {
    colKey: 'name',
    align: 'center',
    width: '200',
    title: '商品名称'
  },
  {
    colKey: 'vip_1',
    align: 'center',
    width: '88',
    title: 'VIP1单价'
  },
  {
    colKey: 'vip_2',
    align: 'center',
    width: '88',
    title: 'VIP2单价'
  },
  {
    colKey: 'vip_3',
    align: 'center',
    width: '88',
    title: 'VIP3单价'
  },
  {
    colKey: 'vip_4',
    align: 'center',
    width: '88',
    title: 'VIP4单价'
  },
  {
    colKey: 'vip_5',
    align: 'center',
    width: '88',
    title: 'VIP5单价'
  },
  {
    colKey: 'vip_6',
    align: 'center',
    width: '88',
    title: 'VIP6单价'
  },
  {
    colKey: 'intro',
    align: 'center',
    title: '商品简介'
  },
  {
    colKey: 'cmd',
    title: '操作',
    width: '100'
  }
]

const GetAllProductList = async () => {
  data.Loading = true
  let res = await api.Admin.Product.GetAllProduct()
  if (res != null) {
    data.ProductAllList = res.data
    data.ProductAllListPagination.total = data.ProductAllList.length
  }
  data.Loading = false
}

const onPageChange = (val: PageInfo) => {
  data.ProductAllListPagination.current = val.current
  data.ProductAllListPagination.pageSize = val.pageSize
}

onMounted(async () => {
  await GetAllProductList()
})
</script>